<template>
  <div class="check-goods">
    <div class="check-goods-controls">
      <slot></slot>
    </div>
    <van-card
      class="check-goods-card"
      :price="formatPrice(item.price)"
      :title="item.name"
      :thumb="item.thumb"
      @click="onClick(item)"
    >
      <slot name="price" slot="price">

      </slot>
      <div
        slot="desc"
        class="check-goods-desc van-multi-ellipsis--l2"
        @click.stop
        @click="onClickSku(item)"
        v-if="item.status"
      >
        {{item.sku}}
      </div>
      <div
        slot="num"
        class="check-goods-number"
        @click.stop
      >
        <slot name="price-right">
          <van-stepper
            v-model="item.num"
            integer
            :min="1"
            :max="item.stock"
            :disabled="!item.status"
            :step="1"
            @change="onChangeStepper(item.id, $event)"
          />
        </slot>
      </div>
    </van-card>
  </div>
</template>

<script>
import { Icon, Button, Checkbox, Card, Stepper } from 'vant'

export default {
  name: 'CheckGoodsCard',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Card.name]: Card,
    [Stepper.name]: Stepper,
    [Checkbox.name]: Checkbox
  },
  props: {
    item: {
      type: Object,
      requried: true
    },
    editmode: {
      type: Boolean,
      default: true
    }
  },

  methods: {
    onClick (item) {
      console.log('onclick', item.id)
      this.$emit('click', item)
    },
    onClickSku (item) {
      console.log('onClickSku', item.id)
      this.$emit('click-desc', item)
    },
    onChangeStepper (id, num) {
      this.$emit('change-stepper', id, num)
    },
    formatDescription (sku, stock) {
      if (stock > 0) {
        return sku
      }
      return sku + '（库存不足）'
    },
    formatPrice (price) {
      return price.toFixed(2)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.check-goods {
  background: #fff;
  display: flex;
  padding: 15px 15px 15px 0;
  &-card {
    background: #fff;
    flex: 1;
    margin: 0;
    padding: 0;
    .van-card__title {
      font-size: 14px;
      line-height: 20px;
      max-height: 40px;
    }
    .van-card__num {
      float: none;
    }
    .van-card__bottom {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .van-card__price {
        color: #ff6600;
        &-currency {
          margin-right: 2px;
        }
      }
    }
  }
  &-desc {
    padding: 5px;
    background: #f2f2f2;
    border-radius: 3px;
    color: #999;
    margin: 10px 0;
    max-height: 40px;
    line-height: 15px;
  }
  &-controls {
    width: 50px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    .van-checkbox {
      width: 100%;
      height: 100%;
      justify-content: center;
    }
  }

  &-number {
    float: none;
  }
}
</style>
